<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Details_page</title>
    <link rel="stylesheet" href="css/telsa.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        .main .left img{width: 500px}
    </style>
</head>
<body>
    <!-- top -->
     <div class="top"> 
        <div class="topl">
            <div class="iconfont tlogo"><a href="./index.html">&#xea37;</a></div>
            <span><a href="">商店</a></span>
            
        </div>
        <div class="topc">
            <ul>
                <li><a href="">店铺活动</a></li>
                <li><a href="">充电产品</a></li>
                <li><a href="">优选配件</a></li>
                <li><a href="">精选服饰</a></li>
                <li><a href="">周边精品</a></li>
            </ul>
        </div>
        <div class="topr">
            <span id="login"><a href="./login.html">登录</a></span>
            <span class="iconfont">&#xe6e4;</span>
            <span class="iconfont">&#xe600;</span>
        </div>
        <script src="./js/jquery.js"></script>
        <script>
            // 登录守卫
        if(localStorage.getItem("isLogin") === "OK"){
           $("#login").html(`<a href="./Personal.html">${localStorage.getItem("username")}</a>`)
          }else{
            $("#login").html(`<a href="./login.html">登录</a>`)
          }
        </script>
        
    </div> -->
    <!-- 主体main -->
    <div class="main">
 <div class="bleft">
    <div class="left">
        <img class="tive" src="" alt="">
        
    </div>
 </div>
        <div class="right">
            
        </div>
    </div>
    <!-- foot -->
    <br>
    <br>
    <div class="foot">
        <ul>
          <li>Tesla © 2021</li>
          <li>隐私和法律</li>
          <li>沪ICP备2021004806号-1</li>
          <li>工作机会</li>
          <li>商店常见问题</li>
          <li>tesla.cn</li>
        </ul>
    </div>
    <div>
        <div class="b_box">
            <img src="imgs/xqy3.jpg" alt="">
            <!-- <img src="imgs/xqy2.jpg" alt="">
            <img src="imgs/xqy1.jpg" alt=""> -->
        </div>
    </div>

</body>
<script src="./js/jquery.js"></script>
<script>

    const id = location.search.split("=")[1];

    $.ajax({
        url:"./data/goods.json",
        success:res=>{
            res = JSON.parse(res)
            let i = 0;
            res.some((val,idx)=>{
                i = idx;
                return val.goodsId === id;
            })
            
            $(".left").html(`<img  class:"tive" src="${res[i].proImg}" alt="">
            <img src="${res[i].proRmg}">
            <img src="${res[i].proIImg}">
            <span></span>
            `)

            const right = `<h2>${res[i].proName}</h2>
            <div class="rcc">
                <h5>¥ ${res[i].price}</h5>
                <div class="rtc">
                    <h6>颜色</h6>
                    <ul class="cont">
                        ${createColor(res[i].color)}
                    </ul>
                </div>
                <div class="rts">
                    <h6>大小</h6>
                    <ul>
                        ${createSize(res[i].size)}
                    </ul>
                </div>
                <div class="rtn">
                    <h6>数量</h6>
                    <span>-</span>
                    <span>1</span>
                    <span>+</span>
                </div>
                <div class="rtb">
                    <div><input type="button" value="添加到购物车"></div>
                    <a href="">需要帮助？</a>
                </div>
            </div>
            <div class="rtf">
                <div>商品描述</div>
                <div>${res[i].message}</div>
                <div>关于色差：此款白色T恤采用带有 3D 效果的白色 Logo 设计，选购前请注意实物与图片存在色差</div>
                <ul>
                    <li>XS : 胸围 98cm，肩宽 44.5cm，衣长 61cm</li>
                    <li>S : 胸围 104cm，肩宽 46cm，衣长 63cm</li>
                    <li>M : 胸围 110cm，肩宽 47.5cm，衣长 66cm</li>
                    <li>L : 胸围 116cm，肩宽 49cm, 衣长 69cm</li>
                    <li>XL (180/108B) : 胸围 117cm，肩宽 46.5cm</li>
                    <li>XXL : 胸围 132cm, 肩宽 53cm, 衣长 74.5cm</li>
                </ul>
            </div>`

            // 解析拼接 颜色 页面结构
            function createColor(msg){
                let str = ""
                msg.forEach(val => {
                    str += `<li  class:"active" style="background:${val.value}" title="${val.title}"></li>`
                });
                return str;
            }
            
            // 解析拼接 大小 页面结构
            function createSize(msg){
                let str = ""
                msg.forEach(val => {
                    str += `<li title="${val.title}">${val.value}</li>`
                });
                return str;
            }

            // 填充右侧商品信息页面
            $(".right").html(right);

            function Tab(){
            this.li = document.querySelectorAll(".cont li");
            this.div = document.querySelectorAll("img");
            }
            Tab.prototype.bianhao = function(){
                for(var i=0;i<this.li.length;i++){
                        this.li[i].hao = i;
                    }
                }
            Tab.prototype.bangdingshijian = function(){
                const that = this;
                for(var i=0;i<this.li.length;i++){
                    this.li[i].onclick = function(){
                        for(var i=0;i<that.li.length;i++){
                            that.li[i].className = ""
                            }
                            this.className = "active";
                            that.xianshineirong(this.hao)
                        }
                    }
                }
                Tab.prototype.xianshineirong = function(index){
                    for(var i=0;i<this.div.length;i++){
                        this.div[i].style.display = "none";
                    }
                    this.div[index].style.display = "block";
                }


                // 放大镜
                var t = new Tab();
                t.bianhao();
                t.bangdingshijian();


                function BigImg(ops){
            // 1. 解析参数，选择元素
            this.bBox = ops.bBox
            this.bImg = ops.bImg
            this.sBox = ops.sBox
            
            this.sImg = ops.sImg
                   
            this.sSpan = ops.sSpan
            console.log(this.sSpan);

            // 3. 绑定事件
            this.addEvent();
        }
        BigImg.prototype.init = function(){
            // 补充布局
            // 计算右侧的显示比例
            // 根据右侧的显示的比例，计算左侧的span的尺寸

            console.log(this.bBox.offsetWidth);

            // 左侧蒙层 = (右侧框 / 右侧图) * 左侧框

            this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
            this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";

        }
        BigImg.prototype.addEvent = function(){
            const that = this;
            // 绑定事件
            // 进入
            this.sBox.onmouseover = function(){
                // 显示
                that.show();
            }
            // 离开
            this.sBox.onmouseout = function(){
                // 隐藏
                that.hide();
            }
            // 移动
            this.sBox.onmousemove = function(eve){
                const e = eve || window.event;
                // 移动
                that.move(e);
            }
        }
        BigImg.prototype.show = function(){
            // 显示
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";

            // 2. 补充布局
            this.init();
        }
        BigImg.prototype.hide = function(){
            // 隐藏
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }
        BigImg.prototype.move = function(e){
            // console.log(e.offsetX, e.offsetY)

            // 计算鼠标移动的位置
            let l = e.pageX - this.sSpan.offsetWidth/2 - this.sBox.offsetLeft+30;
            let t = e.pageY - this.sSpan.offsetHeight/2 - this.sBox.offsetTop+80;

            // 边界限定
            if(l<50) l=50;
            if(t<100) t=100;
            if(l>this.sBox.offsetWidth-this.sSpan.offsetWidth+50){
                l=this.sBox.offsetWidth-this.sSpan.offsetWidth+50
            }
            if(t>this.sBox.offsetHeight-this.sSpan.offsetHeight+100){
                t=this.sBox.offsetHeight-this.sSpan.offsetHeight+100
            }
            // 设置给span
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            // 计算鼠标移动的比例
            const x = l / (this.sBox.offsetWidth-this.sSpan.offsetWidth);
            const y = t / (this.sBox.offsetHeight-this.sSpan.offsetHeight);
            // console.log(x, y)
            // 根据比例计算右侧大图要移动的位置
            this.bImg.style.left = -(this.bImg.offsetWidth - this.bBox.offsetWidth) * x + "px";
            this.bImg.style.top = -(this.bImg.offsetHeight - this.bBox.offsetHeight) * y + "px";
        }

        new BigImg({
            sBox:document.querySelector(".left"),
            sImg:document.querySelector(".left .tive"),
            sSpan:document.querySelector(".left span"),
            bBox:document.querySelector(".b_box"),
            bImg:document.querySelector(".b_box img")
        })

        }
    })
</script>


</html>